<template>
	<view class="container">
		<view class="department" v-for="item in doctorList" :key="item.id">
			<view class="department_img">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="department_info">
				<view class="department_name">
					<uni-tag type="primary" inverted :text="item.doctorName"></uni-tag>
					<uni-tag type="primary" inverted :text="item.levels"></uni-tag>
					<!-- <text class="name">{{item.doctorName}}</text> -->
					<!-- <text class="experts">{{item.levels}}</text> -->
				</view>
				<view class="department_detail">
					{{item.descption}}
				</view>
				<view class="department_select" @click="handleToDoctor(item)">
					点击预约
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				doctorId:'',
				doctorList:[]
			}
		},
		onLoad(res) {
			this.doctorId=res.id
			this.getDoctorInfo()
		},
		created() {
			this.getDoctorInfo()
		},
		methods: {
			handleToDoctor(item){
				uni.navigateTo({
					url:`../registered/registered?doctorId=${item.id}`
				})
				uni.setStorageSync('doctor', item)
			},
			getDoctorInfo(){
				uni.$http.post(`/user-server/api/department/v1/search/doctor/${this.doctorId}`).then(res=>{
					this.doctorList=res.data.data
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.container{
		padding: 20rpx;
		background-color: #fff;
	}
	.department{
		// height: 250rpx;
		display: flex;
		margin-bottom: 10rpx;
		border-bottom: 5rpx solid #fff;
		border-radius: 15rpx;
		box-shadow: 0px 0px 5px 2px rgba(208, 208, 208, 0.5);
	}
	.department_img{
		width: 30%;
		height: 250rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.department_img image{
		height: 230rpx;
		width: 100%;
		border-radius: 15rpx;
	}
	.department_info{
		width: 70%;
		padding-left: 20rpx;
	}
	.department_name{
		// height: 50rpx;
		display: flex;
		color: #FFFFFF;
		.name{
			background-color: #00aaff;
			padding:10rpx;
		}
		.experts{
			padding:10rpx;
			background-color: #aaaa7f;
		}
	}
	.department_detail{
		border: solid 1rpx #ccc;
		height: 150rpx;
		border-radius: 6rpx;
	}
	.department_select{
		height: 50rpx;
		width: 170rpx;
		text-align: center;
		line-height: 50rpx;
		float: right;
		border-radius: 10rpx;
		
		/* background-color: rgb(112,241,170); */
		background-image: linear-gradient(90deg, rgb(92, 197, 241) 30%, rgb(0, 144, 201) 100%);
		color: #FFFFFF;
		border-radius: 6rpx;
	}

</style>
